<!-- components/Sidebar.vue -->
<template>
  <nav class="sidebar" :class="{ collapsed }">
    <div class="tw-flex-none tw-overflow-hidden tw-bg-[#F8F9FC] tw-w-40 ">
      <div class="tw-group tw-fixed tw-bottom-0 tw-top-[72px] tw-z-[100] tw-w-40 ">
        <div class="tw-hidden"></div>
        <div class="tw-scrollbar-transparent tw-relative tw-h-full tw-w-full tw-overflow-y-auto tw-overscroll-contain tw-bg-[#F8F9FC] tw-pb-[100px] tw-text-[14px] tw-text-[#111E36]">

          <div class="tw-fixed tw-left-0 tw-z-[100] tw-block tw-h-full tw-w-[calc((100%-1920px)/2)] tw-bg-[#f2f3f7]"></div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="/beijing/" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__home"></use>
                </svg>
                <span class="tw-align-top">首页</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="/price#pvareaid=6861598" data-prevent-nprogress="true" target="_self" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__car"></use>
                </svg>
                <span class="tw-align-top">选车</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://mf.autohome.com.cn/v3/pc/8306?type=m&amp;pvareaid=6865344" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__butie"></use>
                </svg>
                <span class="tw-align-top">国家补贴</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://car.autohome.com.cn/#pvareaid=6861598" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__baojia"></use>
                </svg>
                <span class="tw-align-top">报价</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="/rank/1#pvareaid=6863887" data-prevent-nprogress="true" target="_self" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__rank"></use>
                </svg>
                <span class="tw-align-top">排行榜</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://www.autohome.com.cn/all/#pvareaid=3311229" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__news"></use>
                </svg>
                <span class="tw-align-top">资讯</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://blog.tingfengcloud.cn" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__news"></use>
                </svg>
                <span class="tw-align-top">教育培训</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://v.autohome.com.cn/#pvareaid=3311238" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__video"></use>
                </svg>
                <span class="tw-align-top">视频</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://live.autohome.com.cn/#pvareaid=6839235" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__live"></use>
                </svg>
                <span class="tw-align-top">直播<img src="../../assets/img/live-animation.gif" fetchPriority="low" loading="lazy" width="14" height="14" alt="" class="tw-mb-[2px] tw-ml-1 tw-inline-block"></span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://car.autohome.com.cn/pic/index.html#pvareaid=3311245" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__picture"></use>
                </svg>
                <span class="tw-align-top">车图</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://chejiahao.autohome.com.cn/#pvareaid=3311237" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__chejiahao"></use>
                </svg>
                <span class="tw-align-top">车家号</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://club.autohome.com.cn/#pvareaid=3311253" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__club"></use>
                </svg>
                <span class="tw-align-top">论坛</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://k.autohome.com.cn/#pvareaid=3311255" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__koubei"></use>
                </svg>
                <span class="tw-align-top">口碑</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://dealer.autohome.com.cn/beijing/#pvareaid=3311249" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__dealer"></use>
                </svg>
                <span class="tw-align-top">经销商</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://www.che168.com/nlist/beijing/list/?pvareaid=100533" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__usedcar"></use>
                </svg>
                <span class="tw-align-top">二手车</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://mall.autohome.com.cn/#pvareaid=3311247" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__carmall"></use>
                </svg>
                <span class="tw-align-top">车商城</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://buy.autohome.com.cn/110000/undefined/index.html#pvareaid=3311248" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__jiangjia"></use>
                </svg>
                <span class="tw-align-top">降价</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://page.autohome.com.cn/pc/brandspace/page?pvareaid=6864659" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__pinpaikongjian"></use>
                </svg>
                <span class="tw-align-top">品牌空间</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://yongche.autohome.com.cn/?pvareaid=6849207" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__yongche"></use>
                </svg>
                <span class="tw-align-top">用车</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="###" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__tool"></use>
                </svg>
                <span class="tw-align-top">工具</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div>
            <div class="tw-mx-[10px] tw-pb-3 tw-pt-1 before:tw-block before:tw-h-px before:tw-w-full before:tw-bg-[#E6E9F0]"></div>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="###" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__time"></use>
                </svg>
                <span class="tw-align-top">最近浏览</span>
              </div>
              <svg width="20px" height="20px" class="tw-size-4">
                <use href="#svg_sprite__arrow_right"></use>
              </svg></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://www.autohome.com.cn/bug/jubao.aspx#pvareaid=6861421" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__alert"></use>
                </svg>
                <span class="tw-align-top">问题举报</span>
              </div></a>
          </div>
          <div class="tw-group tw-relative tw-mb-2 tw-px-[10px]">
            <a href="https://www.autohome.com.cn/bug/default.aspx#pvareaid=6861421" data-prevent-nprogress="true" target="_blank" class="tw-flex tw-items-center tw-block tw-h-8 tw-w-full tw-pr-3 tw-leading-8 tw-rounded tw-peer hover:tw-bg-[--antd-itemHoverBg]">
              <div class="tw-flex tw-flex-1 tw-items-center tw-whitespace-nowrap">
                <svg width="20px" height="20px" class="tw-ml-3 tw-mr-2 tw-size-5">
                  <use href="#svg_sprite__email"></use>
                </svg>
                <span class="tw-align-top">意见反馈</span>
              </div></a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  collapsed: Boolean
})

const menuItems = [
  { id: 1, icon: '🏠', text: '首页' },
  { id: 2, icon: '🔍', text: '找车' },
  { id: 3, icon: '💰', text: '买车' },
  { id: 4, icon: '🔧', text: '用车' },
  { id: 5, icon: '👥', text: '社区' },
  { id: 6, icon: '⭐', text: '收藏' },
  { id: 7, icon: '⚙️', text: '设置' }
]

const handleMenuItemClick = (item) => {
  console.log('Selected menu:', item.text)
  // 实际开发中可以添加路由跳转逻辑
}
</script>

<style scoped>
@import "../../assets/css/home.ui.min.css";
@import "../../assets/css/0d9e3ef3f2c696f9.css";
@import "../../assets/css/260ea2ba08905ee4.css";
.sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 150px;
  background: #f5f5f5;
  transition: all 0.3s;
  z-index: 999;
  overflow-y: auto;
}

.sidebar.collapsed {
  width: 30px;
}

.menu-item {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.menu-item:hover {
  background: #eee;
}

.icon {
  font-size: 20px;
}
</style>